<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动案例练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .outer{
            width: 1000px;
            height: 96px;
            background: #F4F3F2;
            margin: 100px auto;
            padding: 15px 0;
        }
        .outer .pic{
            width: 290px;
            height: 96px;
            float: left;
            padding-left: 20px;
            border-right: 1px solid #D0CDC7;
        }
        .outer .pic .top{
            height: 65px;
        }
        .outer .pic .top img{
            width: 83px;
            height: 65px;
            float: left;
        }
        .outer .pic .top .t_cont{
            float: left;
            width: 197px;
            padding-left: 10px;
            font-size: 14px;
            font-family: '宋体';
            color: #0B335F;
        }
        .outer .pic .top .t_cont .tit{
            line-height: 24px;
        }
        .outer .pic .top .t_cont .des{
            font-size: 12px;
            color: #666560;
            line-height: 22px;
        }
        .outer .pic .top .t_cont .tit span{
            color: #DA0000;
        }
        .outer .pic .bottom p{
            font-size: 14;
            color: #164560;
            line-height: 30px;
        }
        .outer .news{
            float: left;
            padding-left: 32px;
            line-height: 24px;
            font-size: 14px;
            color: #164560;
        }
        .outer .news ul{
            list-style: none;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="pic">
            <div class="top">
                <img src="../img/4.jpg" alt="">
                    <div class="t_cont">
                        <p class="tit">
                           <span>快看|</span>2019我们一起向她表白
                        </p>
                        <p class="des">
                            新中国70华诞，为祖国母亲而歌。
                        </p>
                    </div>
                <div class="p_con">
                </div>
            </div>
            <div class="bottom">
                <p>
                    解放军最新地空导弹车曝光！战力惊人
                </p>
            </div>
        </div>
        <div class="pic">
            <div class="top">
                <img src="../img/3.jpg" alt="">
                    <div class="t_cont">
                        <p class="tit">
                           <span>中国梦实践者</span>大国工匠 行业先锋 创业圆梦
                        </p>
                    </div>
                <div class="p_con">
                </div>
            </div>
            <div class="bottom">
                <p>
                    “国家情怀”是新时代一支“强心剂”
                </p>
            </div>
        </div>
        <div class="news">
            <ul>
                <li>第七届中国网络视听大会</li>
                <li>聚焦2019数博会</li>
                <li>壮丽70年 奋斗新时代</li>
                <li>2019中国北京世界园艺博览会</li>
            </ul>
        </div>
    </div>
</body>
</html>